
<template>
	<div class="yongjinguanli">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/yongjin' }">财务管理</el-breadcrumb-item>
            <el-breadcrumb-item>佣金结算订单管理</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>
        <div style=" padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">

          <div style="height: 112px; background: rgb(255, 255, 255); border-radius: 20px; padding: 20px;" class="flexb">
              <div class="flex">
                <div>
                  <div style="margin-bottom: 10px;">商品名称&编码</div>
                  <div><el-input v-model="search.gname" style="width: 200px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                </div>
                <div>
                  <div style="margin-bottom: 10px;">订单ID</div>
                  <div><el-input v-model="search.order_no" style="width: 200px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                </div>
                <div>
                  <div style="margin-bottom: 10px;">分销商名称</div>
                  <div><el-input v-model="search.merchant_name" style="width: 200px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                </div>
                <div>
                  <div style="margin-bottom: 10px;">导入时间</div>
                  <div class="flexc">
                    <el-date-picker v-model="times" @change="changetimes" value-format="yyyy-MM-dd HH:mm:ss" style="margin-right: 30px;" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                  </div>
                </div>
                <div style="margin-right: 30px;">
                  <div style="margin-bottom: 10px;">&nbsp;</div>
                  <div><el-button type="primary" round icon="el-icon-search" @click="sousuo">检索</el-button></div>
                </div>
              </div>
          </div>
          <div class="flexc" style="padding: 20px 0;">
            <div style="margin-right: 20px;">
              <el-upload :show-file-list="false" action="#" :http-request="uploasd">
                <el-button type="primary" round icon="el-icon-plus">导入触发支出订单</el-button>
              </el-upload>
            </div>
            <div style="margin-right: 20px;" ><el-button round @click="piliangkai">批量支出结算</el-button></div>
            <div style="margin-right: 20px;"><el-button round @click="xiazai">导出待结算明细</el-button></div>
            <div><el-button type="text" @click="down">模板下载</el-button></div>
          </div>

          <el-table :data="list" style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column align="center" prop="order_no" label="订单ID"></el-table-column>
            <el-table-column align="center" prop="merchant_name" label="分销商"></el-table-column>
            <el-table-column align="center" prop="goods_name" label="商品名称"></el-table-column>
            <el-table-column align="center" prop="active_status" label="激活状态">
              <template slot-scope="scope">
                <div v-if="scope.row.active_status == 0" style="color: rgb(9, 134, 0);">未激活</div>
                <div v-if="scope.row.active_status == 100" style="color: rgb(9, 134, 0);">已激活</div>
                <div v-if="scope.row.active_status == 200" style="color: rgb(9, 134, 0);">激活且充值</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="commission" label="待支出佣金金额(元)"></el-table-column>
            <el-table-column align="center" prop="order_at" label="订单创建时间"></el-table-column>
            <el-table-column align="center" prop="updated_at" label="导入时间"></el-table-column>
            <el-table-column align="center" prop="ok" label="是否结算佣金">
              <template slot-scope="scope">
                <div v-if="scope.row.ok == 1" style="color: rgb(9, 134, 0);">满足支出</div>
                <div v-if="scope.row.ok == 0" style="color: rgb(236, 82, 1);">不满足支出</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="ok" label="结算触发方式">
              <template slot-scope="scope">
                <div v-if="scope.row.settlement_conditions == 1" >自动触发</div>
                <div v-if="scope.row.settlement_conditions == 0" >人工导入</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="remark" label="失败原因"></el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <div @click="shanchu(scope.row.id)" style="color: rgb(254, 61, 61); cursor: pointer;">删除</div>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :current-page="search.page"
           @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
		   <!-- <footers></footers> -->
        </div>
      </div>
    </div>


    <el-dialog title="批量支出结算" :visible.sync="log" width="440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div>
        <div style="margin-bottom: 20px; font-size: 16px;">
          <el-radio v-model="zhichu_type" :label="0">结算按当前选择的条数：{{multipleSelection.length}}条</el-radio>
        </div>
        <div style="margin-bottom: 20px; font-size: 16px;">
          <el-radio v-model="zhichu_type" :label="1">结算当前检索的全量结果：{{total}}条</el-radio>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="log = false">关闭</el-button>
        <el-button round type="primary" @click="piliang">确定</el-button>
      </span>
    </el-dialog>

    <div v-if="shoujiban" style=" color: rgb(2, 12, 29); font-size: 0.24rem; background: #f6f8fb; padding-top: 1rem;">
      <topandleft></topandleft>
      <div style="background: #fff; padding: 0.3rem;">
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="width: 2px; height: 0.2rem; background: rgb(2, 12, 29); margin-right: 10px; overflow: hidden;"></div>
          <div style="font-size: 0.36rem; font-weight: bold;">财务管理</div>
        </div>
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="color: rgb(175, 179, 188);">首页</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div style="color: rgb(175, 179, 188);">财务管理</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div>佣金结算订单管理</div>
        </div>
      </div>
      <div style="padding: 0.3rem;">
        <div style=" background: #fff; border-radius: 0.2rem; padding: 0.3rem;">
          <div class="flexc" style="margin-bottom: 0.2rem;">
            <el-input v-model="search.gname" placeholder="请输入商品名称&编码"></el-input>
          </div>
          <div class="flexc" style="margin-bottom: 0.2rem;">
            <el-input v-model="search.order_no" placeholder="请输入订单ID"></el-input>
          </div>
          <div class="flexc" style="margin-bottom: 0.2rem;">
            <el-input v-model="search.merchant_name" placeholder="请输入分销商名称"></el-input>
          </div>
<!--          <div class="flexc" style="margin-bottom: 0.2rem;">
            <el-date-picker v-model="search.start" style="width: 100%;" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择导入开始时间"></el-date-picker>
          </div>
          <div class="flexc" style="margin-bottom: 0.2rem;">
            <el-date-picker v-model="search.end" style="width: 100%;" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择导入结束时间"></el-date-picker>
          </div>
          -->
          <div class="flexbc" style="margin-bottom: 0.2rem;">
            <div class="datashow" @click="xuanshijianshow(1)" style="color: #C0C4CC;" v-if="!search.start">请选择开始日期</div>
            <div class="datashow" @click="xuanshijianshow(1)" v-if="search.start">{{search.start}}</div>
            <div >~</div>
            <div class="datashow" @click="xuanshijianshow(2)" style="color: #C0C4CC;" v-if="!search.end">请选择结束日期</div>
            <div class="datashow" @click="xuanshijianshow(2)" v-if="search.end">{{search.end}}</div>
          </div>
          <van-popup v-model="showdate" round position="bottom">
            <van-datetime-picker type="date" :min-date="minDate" title="选择时间"  @confirm="xuanshijian" @cancel="showdate = false"  />
          </van-popup>

          <div @click="sousuo" class="flexcc" style="background: rgb(0, 90, 255); height: 41px; border-radius: 41px; padding: 0 0.4rem; color: #fff;">检索</div>
        </div>

        <div class="flexc" style="padding: 0.2rem 0;">
          <div style="margin-right: 0.2rem; margin-bottom: 0.2rem;">
            <el-upload :show-file-list="false" action="#" :http-request="uploasd">
              <el-button type="primary" round icon="el-icon-plus">导入触发支出订单</el-button>
            </el-upload>
          </div>
          <div style="margin-right: 0.2rem; margin-bottom: 0.2rem;" ><el-button round @click="piliangkai">批量支出结算</el-button></div>
          <div style="margin-right: 0.2rem; margin-bottom: 0.2rem;"><el-button round @click="xiazai">导出待结算明细</el-button></div>
          <div style="margin-bottom: 0.2rem;"><el-button type="text" @click="down">模板下载</el-button></div>
        </div>

        <van-list  v-model="loading"  :finished="finished"  finished-text="没有更多了"  @load="onLoad">
            <div v-for="item in list" :key="item.id" style="background: #fff; padding: 0.2rem; margin-bottom: 0.2rem; border-radius: 0.2rem;">

              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>结算时间</div>
                <div>{{item.created_at}}</div>
              </div>
              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>满足结算订单</div>
                <div>{{item.ok_count}}</div>
              </div>
              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>不满足结算订单</div>
                <div>{{item.orders_count-item.ok_count}}</div>
              </div>
              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>结算金额</div>
                <div>{{item.sum_commission}}</div>
              </div>

              <div class="flexc">
                <div @click="xiazai(scope.row.id)" style="color: rgb(0, 90, 255); cursor: pointer;">下载明细</div>
              </div>

            </div>
        </van-list>
      </div>
    </div>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import topandleft from '../topandleft.vue'
	export default {
		name: 'yongjinguanli',
    components:{
      left,top,topandleft,footers
    },
		data() {
			return {
        log:false,
        search:{
          page:1,
          page_size:20,
          order_no:"",
          gname:"",
          merchant_name:"",
          start:"",
          end:"",
        },
        zhichu_type:0,
        times:[],
        list:[],
        total:0,
        widthss:false,
        multipleSelection:[],

        shoujiban:false,
        loading: false,
        finished: false,

        showdate:false,
        whodata:"",
        minDate: new Date(2023, 0, 1)
			}
		},
		created() {
      // this.getlist()
		},
		mounted() {
      if(window.screen.width == 1920){
        this.widthss = true
      }
      if(window.screen.width < 1080){
        this.shoujiban = true
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;

        this.onLoad()
      }else{
        this.getlist()
      }
		},
		methods: {
      xuanshijianshow:function(val){
        if(val == 1){
          this.showdate = true
          this.whodata = 'start'
        }
        if(val == 2){
          this.showdate = true
          this.whodata = 'end'
        }
      },
      xuanshijian:function(val){
        this.search[this.whodata] = moment(val).format('YYYY-MM-DD hh:mm:ss')
        this.showdate = false
      },
      onLoad() {
        axios.get('/own/commission/orders',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            if(response.data.data.data.length > 0){
              response.data.data.data.forEach(item=>{
                this.list.push(item)
              })
              if (this.list.length >= response.data.data.data.total) {
                this.finished = true;
              }else{
                this.search.page++
                this.loading = false;
              }
            }else{
              this.finished = true;
            }

        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      xiazai:function(){
        axios.post('/own/commission/orders/exp').then((response)=>{
        	if (response.data.msg.code == 0) {
            window.location.href = location.origin + '/' + response.data.data
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      piliangkai:function(){
        this.log = true
      },
      piliang:function(){
        this.$confirm('确定进行批量支出结算吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.zhichu_type == 0){
            if(this.multipleSelection.length > 0){
              let arr = []
              this.multipleSelection.forEach(item=>{
                 arr.push(item.id)
              })
              axios.post(`/own/commission/orders/expend`,{ids:arr})
                .then(response => {
                  if(response.data.msg.code == 0){
                    this.getlist()
                    this.$message.success('已批量支出结算');
                  }else{
                    this.$message.error(response.data.msg.info);
                  }
                });
            }else{
              this.$message.error('请选择订单');
            }
          }
          if(this.zhichu_type == 1){
            let obj = {
              all:1,
              id:this.search.id,
              gname:this.search.gname,
              merchant_name:this.search.merchant_name,
              start:this.search.start,
              end:this.search.end
            }
            axios.post(`/own/commission/orders/expend`,obj)
              .then(response => {
                if(response.data.msg.code == 0){
                  this.getlist()
                  this.$message.success('已批量支出结算');
                }else{
                  this.$message.error(response.data.msg.info);
                }
              });
          }
        })
      },
      shanchu:function(id){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(`/own/commission/order/del`,{id:id})
            .then(response => {
              if(response.data.msg.code == 0){
                this.getlist()
                this.$message.success('已删除');
              }else{
                this.$message.error(response.data.msg.info);
              }
            });
        })
      },
      changetimes:function(){
        if(this.times != null){
          this.search.start = this.times[0]
          this.search.end = this.times[1]
        }else{
          this.search.start = ''
          this.search.end = ''
        }
      },
      down:function(){
        const a = document.createElement('a');
        a.setAttribute('download', '导入触发支出订单.xlsx');
        a.setAttribute('href', location.origin + '/hou/static/xlsx/chufazhichudingdan.xlsx');
        a.click();
      },
      uploasd:function(file){
        let ff = this.duwenjian(file)

        ff.then(res=>{
          console.log(res)
          let data = []
          res.forEach(item => {
            let obj = {
              mob:item['生产号码'],
              ok:item['是否满足结算佣金'] == '满足'?1:0,
              rmk:item['不满足原因'],
            }
            data.push(obj)
          })
          console.log(data)
          axios.post('/own/commission/order/imp',{data:data}).then((response)=>{
          	if (response.data.msg.code == 0) {
              this.$message.success(`上传成功${response.data.data.suc}个`);
              this.sousuo()
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      sousuo:function(){
        this.search.page = 1
        if(window.screen.width < 1080){
          this.list = []
          this.loading = false;
          this.finished = false
          this.onLoad()
        }else{
          this.getlist()
        }
      },
      getlist:function(){
        axios.get('/own/commission/orders',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data.data
            // this.list.forEach(item=>{
            //   item.selling_point = JSON.parse(item.selling_point)
            // })
            this.total = response.data.data.total
            this.loading = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      }
		}
	}
</script>


<style scoped lang="less">
  .yongjinguanli{

  }
</style>
